import React from 'react'
import HOCLogin from '../../utile/HOCLogin'
import { NavBar,ProductCard, Tag, Button,SubmitBar,Image,Checkbox   } from 'react-vant'
import * as api from '../../api/index'
import { useDispatch,useSelector } from 'react-redux'
function Cart() {
  const dispatch=useDispatch()
  const shopCart = useSelector(state => state.reducer.shopCart);
  console.log(shopCart)
  const allPrice=useSelector(state =>state.reducer.allPrice);
  const allChecked =useSelector(state =>state.reducer.allChecked)
  console.log(allPrice)
  //单选
  const set_shopcar_checked= (item,index) =>{
    console.log(index)
    dispatch(api.checked(item,index))
  }
  //全选
  const all_shopcar_checked=(checked)=>{
    dispatch(api.allChecked(checked))
  }
  return (
    <div>
      <NavBar title={'购物车'}/>
      {
        shopCart.length ? shopCart.map((item,index)=>{
          return <ProductCard
          key={index}
          num={item.count}
          price={item.price}
           title={item.title}
          thumb={<div className='tu'>
            <Checkbox checked={item.checked} onChange={()=>set_shopcar_checked(item,index)} shape="square" name="c1"></Checkbox>
            <Image src={item.img} />
          </div>}
          tags={
            <>
              <Tag plain type="danger" style={{ marginRight: 5 }}>
                {item.type}
              </Tag>
             
            </>
          }
          footer={
            <>
              <Button size="mini" round plain style={{ marginRight: 2 }} onci>
                增加
              </Button>
              <Button size="mini" round plain>
                减少
              </Button>
            </>
          }
        />
        }) :'购物车暂无数据'
      }

    <div className="demo-submit-bar"><SubmitBar price={allPrice*100} buttonText="提交订单" >
      <Checkbox checked={allChecked} onChange={all_shopcar_checked}>全选</Checkbox>
    </SubmitBar></div>

    </div>
  )
}

export default HOCLogin(Cart)